<template xmlns:v-lazy="http://www.w3.org/1999/xhtml">
  <div
    class="tool-video">
    <w-nav-bar
      title="视频"/>
    <input
      class="w-input-hid"
      type="file"
      @change="fileChange"
      accept="video/*"
      ref="FILE_INPUT">
    <group
      gutter="0"
      class="data-time">
      <datetime
        placeholder="请选择数据"
        @on-change="dataTimeChange"
        format="YYYY-MM"/>
    </group>
    <ul
      class="table-view w-flex-between">
      <li
        v-for="(v, k) in loadListModel.dataArr"
        :key="v.name"
        class="video-box w-image-fit"
        @click.self="palyBtnClick(v)"
        v-lazy:background-image="v.mVideoFromeUrl">
        <video
          v-if="v.play"
          :src="v.photoUrl"
          height="100%"
          width="100%"
          autoplay="autoplay"
          controls="controls">
          您的浏览器不支持 video 标签。
        </video>
        <icon-play
          v-else
          class="play-icon w-pointer"
          width="100px"
          @click="palyBtnClick(v)"
          height="100px"/>
        <w-remove-btn @click.native="removeBtnClick(v, k)"/>
      </li>
    </ul>
    <w-load-more :load-model="loadListModel"/>
    <w-enum-bnt>
      <add-icon
        fill="#fff"
        @click="addBtnClick"/>
    </w-enum-bnt>
  </div>
</template>

<script>
  import WLoadMore from '@/components/global/loadMore'
  import { GetOneFile } from 'yb-tool'
  import OSSListLoad from '@/models/oss/OSSListLoad'
  import Config from '@/config/index'
  import IconRemove from '@/icons/remove.svg'
  import IconPlay from '@/icons/play.svg'
  import OSS from '@/api/OSS'
  import { Datetime, Group } from 'vux'
  import WRemoveBtn from '@/components/mobile/removeBtn'
  import WEnumBnt from '@/components/mobile/moveMenuBtn'
  import AddIcon from '@/icons/add.svg'
  export default {
    name: 'ToolVideo',
    components: {
      IconRemove,
      IconPlay,
      WLoadMore,
      Datetime,
      Group,
      WRemoveBtn,
      WEnumBnt,
      AddIcon
    },
    data() {
      return {
        // 时间
        pickerValue: new Date(),
        // 选择的时间字符串
        timeStr: null,
        // 列表加载模型
        loadListModel: new OSSListLoad(Config.photoBocket, 'OSS_video'),
        // 上传的视频文件
        file: null
      }
    },
    methods: {
      /**
       * 时间改变的时候调用
       */
      dataTimeChange(time) {
        this.loadListModel.prefix = `OSS_video_${time}`
        this.loadListModel.clearData()
        this.loadListModel.loadData().w_then()
      },
      // 添加按钮点击
      addBtnClick() {
        this.$refs['FILE_INPUT'].click()
      },
      // 播放按钮点击
      palyBtnClick(v) {
        this.loadListModel.dataArr.forEach((item) => {
          item.play = false
        })
        v.play = true
      },
      // 删除按钮点击
      async removeBtnClick(v, k) {
        this.$w_popview.confirm('删除提示', '确定要删除该视频吗？', {
          imageUrl: v.mVideoFromeUrl
        }).w_then(() => {
          v.removeData('wyb-photo').w_then(() => {
            this.loadListModel.dataArr.splice(k, 1)
            this.$w_popview.msgSuccess('删除成功')
          })
        })
      },
      // 文件改变的时候
      async fileChange(e) {
        this.file = await GetOneFile(e)
        this.$w_popview.confirm('上传提示', `确定要上传${this.file.name}`).w_then(() => {
          this.upImage()
        })
      },
      // 重新加载数据
      reloadData() {
        this.loadListModel.clearData()
        this.loadListModel.loadData().w_then()
      },
      // 上传数据
      upImage() {
        this.$w_popview.showLoading('上传中...')
        OSS.aLiFileUp(this.file, Config.photoCDNPerfix, '', 'video').then(() => {
          this.$w_popview.msgSuccess('上传完成')
          this.file = null
          this.reloadData()
        }).catch(() => {
          this.$w_popview.msgError('上传失败')
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
.tool-video {
  >.data-time {
    display: block;
    position: fixed;
    left: 0;
    top: 46px;
    width: 100%;
    z-index: 1000;
  }
  >.table-view {
    list-style: none;
    margin: 0;
    padding: 45px 0 0 0;
    flex-direction: column;
    align-items: center;
    >.video-box {
      position: relative;
      width: 395px;
      height: 395px;
      margin-bottom: 10px;
      >.play-icon {
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -50px;
        margin-top: -50px;
      }
    }
  }
}
</style>
